<template>
    <basic-container>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="PC支付" name="A">
                <div>
                    <h5>温馨提示：</h5>
                    <p>支付宝支付需要申请支付宝开放平台、支付宝商户平台</p>
                    <p>支付宝开放平台：<el-link href="https://open.alipay.com/platform/home.htm" target="_blank">https://open.alipay.com/platform/home.htm</el-link></p>
                    <p>支付宝商户平台：<el-link href="https://b.alipay.com/" target="_blank">https://b.alipay.com/</el-link></p>
                    <p>支付宝配置文档：<el-link href="http://test.lightkitch.com/front/doc_payConfigure.htm" target="_blank">http://test.lightkitch.com/front/doc_payConfigure.htm</el-link></p>
                </div>
                <div style="width:50%;margin-top: 10px;">
                    <avue-form ref="form" v-model="objA" :option="optionA"  @submit="submitA">
                    </avue-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="H5支付" name="B">
                <div>
                    <h5>温馨提示：</h5>
                    <p>支付宝支付需要申请支付宝开放平台、支付宝商户平台</p>
                    <p>支付宝开放平台：<el-link href="https://open.alipay.com/platform/home.htm" target="_blank">https://open.alipay.com/platform/home.htm</el-link></p>
                    <p>支付宝商户平台：<el-link href="https://b.alipay.com/" target="_blank">https://b.alipay.com/</el-link></p>
                    <p>支付宝H5配置文档：<el-link href="http://test.lightkitch.com/front/doc_configure.htm" target="_blank">http://test.lightkitch.com/front/doc_configure.htm</el-link></p>
                </div>
                <div style="width:50%;margin-top: 10px;">
                    <avue-form ref="form" v-model="objB" :option="optionB"  @submit="submitB">
                    </avue-form>
                </div>

            </el-tab-pane>
            <el-tab-pane label="APP支付" name="C">
                <div>
                    <h5>温馨提示：</h5>
                    <p>支付宝支付需要申请支付宝开放平台、支付宝商户平台</p>
                    <p>支付宝开放平台：<el-link href="https://open.alipay.com/platform/home.htm" target="_blank">https://open.alipay.com/platform/home.htm</el-link></p>
                    <p>支付宝商户平台：<el-link href="https://b.alipay.com/" target="_blank">https://b.alipay.com/</el-link></p>
                    <p>APP上线指南：<el-link href="http://test.lightkitch.com/front/doc_APPOnlineGuide.htm" target="_blank">http://test.lightkitch.com/front/doc_APPOnlineGuide.htm</el-link></p>
                </div>
                <div style="width:50%;margin-top: 10px;">
                    <avue-form ref="form" v-model="objC" :option="optionC"  @submit="submitC">
                    </avue-form>
                </div>
            </el-tab-pane>
        </el-tabs>
    </basic-container>
</template>
<script>
    import {
        setZfb,
        getZfb
    } from "../../api/base/sysSet/zfbSet";
    import {
        convertAddCode
    } from '@/util/util';
    export default {
        data() {
            return {
                activeName: 'A',
                objA:{},
                objB:{},
                objC:{},
                optionA:{
                    emptyBtn:false,
                    labelWidth:'120',
                    labelPosition:'left',
                    column: [{
                        label: "ID",
                        prop: "alipayPcAppId",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入支付宝ID",
                            trigger: "blur"
                        }]
                    },{
                        label: "密钥",
                        prop: "alipayPcAppPrivateKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入支付宝密钥",
                            trigger: "blur"
                        }]
                    },{
                        label: "公钥",
                        prop: "alipayPcAppPublicKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入支付宝公钥",
                            trigger: "blur"
                        }]

                    },{
                        label: "回调地址",
                        prop: "alipayNotifyUrl",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入回调地址",
                            trigger: "blur"
                        }]
                    }]
                },
                optionB:{
                    emptyBtn:false,
                    labelWidth:'120',
                    labelPosition:'left',
                    column: [{
                        label: "ID",
                        prop: "alipayH5AppId",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入ID",
                            trigger: "blur"
                        }]
                    },{
                        label: "密钥",
                        prop: "alipayH5AppPrivateKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入密钥",
                            trigger: "blur"
                        }]
                    },{
                        label: "公钥",
                        prop: "alipayH5AppPublicKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入公钥",
                            trigger: "blur"
                        }]

                    }]
                },
                optionC:{
                    emptyBtn:false,
                    labelWidth:'120',
                    labelPosition:'left',
                    column: [{
                        label: "ID",
                        prop: "alipayAppAppId",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入支付宝AppID",
                            trigger: "blur"
                        }]
                    },{
                        label: "密钥",
                        prop: "alipayAppAppPrivateKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入支付宝App密钥",
                            trigger: "blur"
                        }]
                    },{
                        label: "公钥",
                        prop: "alipayAppAppPublicKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入支付宝App公钥",
                            trigger: "blur"
                        }]

                    }]
                },
            };
        },
        created(){
            this.getData()
        },
        methods: {
            getData(){
                getZfb().then(res=>{
                    if(res.data.code==200){
                        let obj=res.data.data
                    //基础
                        this.objA.alipayPcAppId=obj.alipayPcAppId
                        this.objA.alipayPcAppPrivateKey=obj.alipayPcAppPrivateKey
                        this.objA.alipayPcAppPublicKey=obj.alipayPcAppPublicKey
                        this.objA.alipayNotifyUrl=obj.alipayNotifyUrl
                        //    H5
                        this.objB.alipayH5AppId=obj.alipayH5AppId
                        this.objB.alipayH5AppPrivateKey=obj.alipayH5AppPrivateKey
                        this.objB.alipayH5AppPublicKey=obj.alipayH5AppPublicKey

                    //    App
                        this.objC.alipayAppAppId=obj.alipayAppAppId
                        this.objC.alipayAppAppPublicKey=obj.alipayAppAppPublicKey
                        this.objC.alipayAppAppPrivateKey=obj.alipayAppAppPrivateKey

                    }
                })
            },
            handleClick() {
            },
            submitA (form,done) {
                convertAddCode(this.objA.alipayPcAppId,data=>{
                    this.objA.alipayPcAppId = data;
                });
                convertAddCode(this.objA.alipayPcAppPrivateKey,data=>{
                    this.objA.alipayPcAppPrivateKey = data;
                });
                convertAddCode(this.objA.alipayPcAppPublicKey,data=>{
                    this.objA.alipayPcAppPublicKey = data;
                });
                setZfb(this.objA).then(res=>{
                    done()
                    this.$message({
                        message:'提交成功',
                        type:'success'
                    })
                    this.activeName='A'
                    this.getData()
                })

            },
            submitB (form,done) {
                convertAddCode(this.objB.alipayH5AppId,data=>{
                    this.objB.alipayH5AppId = data;
                });
                convertAddCode(this.objB.alipayH5AppPrivateKey,data=>{
                    this.objB.alipayH5AppPrivateKey = data;
                });
                convertAddCode(this.objB.alipayH5AppPublicKey,data=>{
                    this.objB.alipayH5AppPublicKey = data;
                });
                setZfb(this.objB).then(res=>{
                    done();
                    this.$message({
                        message:'提交成功',
                        type:'success'
                    })
                    this.activeName='B'
                    this.getData()
                })
            },
            submitC (form,done) {
                convertAddCode(this.objC.alipayAppAppId,data=>{
                    this.objC.alipayAppAppId = data;
                });
                convertAddCode(this.objC.alipayAppAppPublicKey,data=>{
                    this.objC.alipayAppAppPublicKey = data;
                });
                convertAddCode(this.objC.alipayAppAppPrivateKey,data=>{
                    this.objC.alipayAppAppPrivateKey = data;
                });
                setZfb(this.objC).then(res=>{
                    done();
                    this.$message({
                        message:'提交成功',
                        type:'success'
                    })
                    this.activeName='C'
                    this.getData()
                })
            },
        }
    };

</script>
<style>
    h5{
        color: darkred;
        font-weight: bold;
    }
    p{
        line-height: 30px;
    }

</style>